<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>projects</title>
    <style>
        table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;margin: auto}
        th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
        th{font-weight:bold;}
        body{text-align: center}
    </style>
    {% load static %}
    <script type='text/javascript' src="/static/js/jquery.min.js"></script>
    <script type='text/javascript' src="/static/js/user.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#gotoProject").click(function(){
                var projectId = $("#projectId").val();
                var projectTxt = $("#projectId option:selected").text();
                var stage = $("select[name='stage']").val();
                var stageTxt = $("select[name='stage'] option:selected").text()
                var machine = $("select[name='machine']").val();
                var machineTxt = $("select[name='machine'] option:selected").text();
                if(machine=='-1'){
                    alert('请选择测试机信息');
                    return false;
                }
                if(confirm("请确定信息：\n"+"项目："+projectTxt+"\n阶段："+stageTxt+"\nNB："+machineTxt)){
                    $("#dataForm").submit();
                }
            });
            $("#projectId").change(function(){
                var projectId = $(this).val();
                var stage = $("select[name='stage']").val();
                var csrf = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                    url:'/getMachineToTest/',
                    data:{projectId:projectId,stage:stage,csrfmiddlewaretoken:csrf},
                    type:'POST',
                    success:function(data){
                        objs = eval(data);
                        options = "<option value='-1'>--请选择--</option>";
                        for(var i=0;i<objs.length;i++){
                            options = options+"<option value='"+objs[i].id+"'>"+objs[i].name+"</option>";
                        }
                        $("select[name='machine']").empty().append(options);
                    }
                });
            });

            $("select[name='stage']").change(function(){
                var projectId = $("#projectId").val();
                var stage = $(this).val();
                var csrf = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                    url:'/getMachineToTest/',
                    data:{projectId:projectId,stage:stage,csrfmiddlewaretoken:csrf},
                    type:'POST',
                    success:function(data){
                        objs = eval(data);
                        options = "<option value='-1'>--请选择--</option>";
                        for(var i=0;i<objs.length;i++){
                            options = options+"<option value='"+objs[i].id+"'>"+objs[i].name+"</option>";
                        }
                        $("select[name='machine']").empty().append(options);
                    }
                });
            });
            $(function(){
                var projectId = $("#projectId").val();
                var stage =  $("select[name='stage']").val();
                var csrf = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                    url:'/getMachineToTest/',
                    data:{projectId:projectId,stage:stage,csrfmiddlewaretoken:csrf},
                    type:'POST',
                    success:function(data){
                        objs = eval(data);
                        options = "<option value='-1'>--请选择--</option>";
                        for(var i=0;i<objs.length;i++){
                            options = options+"<option value='"+objs[i].id+"'>"+objs[i].name+"</option>";
                        }
                        $("select[name='machine']").empty().append(options);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div style="width: 80%;height:40px;background-color: aqua;margin: 0 auto ">
    <div style="float:left;margin-left: 10px;margin-right:10px;margin-top: 10px"><a href="#" name="projectAndMachinesRelationsPage">测试机列表</a></div>
    <div style="float:right;margin-right:10px;margin-top: 10px"><a href="#" name="logout">退出</a></div>
    <div style="float:right;margin-right:10px;margin-top: 10px">登录人：{{ request.session.showName }}&nbsp;&nbsp;</div>
    <form method="post" name="dataForm">
        {% csrf_token %}
        <input type="hidden" name="dataInput" />
    </form>
</div><p>
    <form name="dataForm" id="dataForm" method="post" action="/gotoCaseListPage/">
     {% csrf_token %}
        <table>
            <tr>
                <td>测试项目</td>
                <td>阶段</td>
                <td>测试NB</td>
            </tr>
            <tr>
                <td>
                    <select id="projectId" name="projectId" style="width:150px">
                        {% for project in projectAndWorkers %}
                        <option value="{{ project.projectId }}">{{ project.projectName }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td>
                    <select name="stage">
                        <option value="1">SIT</option>
                        <option value="2">SVT</option>
                    </select>
                </td>
                <td>
                    <select name="machine">
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <button id="gotoProject">确定</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>